import { ScrollView, Text, View, TouchableOpacity, StyleSheet } from 'react-native'
import { AntDesign } from '@expo/vector-icons';
import { useRouter } from 'expo-router'

export default function Bookmark() {
  const router = useRouter()
  const list = [
    {
      id: 1,
      label: 'React',
      children: [
        {
          id: 11,
          url: 'https://react.dev/learn/managing-state',
          label: 'React',
          value: '',
        },
        {
          id: 12,
          url: 'https://reactnative.cn/docs/getting-started',
          label: 'React Native中文网',
          value: '',
        },
        {
          id: 13,
          url: 'https://reactnative.dev/docs/getting-started',
          label: 'React Native',
          value: '',
        },
        {
          id: 14,
          url: 'https://docs.expo.dev/develop/user-interface/splash-screen/',
          label: 'Expo',
          value: '',
        },
        {
          id: 15,
          url: 'https://reactnavigation.org/docs/getting-started/',
          label: 'React Navigation',
          value: '',
        },
        {
          id: 16,
          url: 'https://nextjs.org/docs',
          label: 'Next.JS',
          value: '',
        }
      ]
    },
    {
      id: 2,
      label: 'Vue',
      children: [
        {
          id: 21,
          url: 'https://cn.vuejs.org/guide/introduction.html',
          label: 'Vue',
          value: '',
        },
        {
          id: 22,
          url: 'https://cn.vitejs.dev/guide/',
          label: 'Vite',
          value: '',
        },
        {
          id: 23,
          url: 'https://pinia.vuejs.org/zh/core-concepts/',
          label: 'Pinia',
          value: '',
        },
        {
          id: 24,
          url: 'https://pinia.vuejs.org/zh/core-concepts/',
          label: 'Pinia',
          value: '',
        },
        {
          id: 25,
          url: 'https://vue-i18n.intlify.dev/guide/introduction',
          label: 'Vue I18n',
          value: '',
        },
        {
          id: 26,
          url: 'https://router.vuejs.org/zh/introduction.html',
          label: 'Vue Router',
          value: '',
        },
        {
          id: 27,
          url: 'https://vuepress.vuejs.org/zh/guide/',
          label: 'VuePress',
          value: '',
        },
      ]
    },
    {
      id: 3,
      label: 'Tailwind CSS',
      children: [
        {
          id: 31,
          url: 'https://tailwindcss.com/docs/installation',
          label: 'Tailwind CSS',
          value: '',
        },
        {
          id: 32,
          url: 'https://daisyui.com/docs/install/',
          label: 'daisyUI',
          value: '',
        },
        {
          id: 33,
          url: 'https://www.material-tailwind.com/docs/react/dialog',
          label: 'Material Tailwind',
          value: '',
        }
      ]
    },
    {
      id: 4,
      label: 'Algorithm',
      children: [
        {
          id: 41,
          url: 'https://www.hello-algo.com/chapter_introduction/',
          label: 'Hello 算法',
          value: '',
        },
        {
          id: 42,
          url: 'https://www.cnblogs.com/Ersonnnn/p/14817287.html',
          label: 'daisyUI',
          value: '',
        },
        {
          id: 43,
          url: 'https://www.material-tailwind.com/docs/react/dialog',
          label: '五分钟带你读懂 堆 —— heap（内含JavaScript代码实现！！）',
          value: '',
        }
      ]
    },
    {
      id: 5,
      label: 'Literature',
      children: [
        {
          id: 51,
          url: 'http://www.guoxuelu.com/zhongyong/',
          label: '中庸',
          value: '',
        },
        {
          id: 52,
          url: 'https://www.360doc.cn/article/39829558_1034727591.html',
          label: '中庸-个人图书馆',
          value: '',
        },
        {
          id: 53,
          url: 'http://www.360doc.com/content/22/0404/13/6711903_1024788473.shtml',
          label: '围炉夜话',
          value: '',
        },
        {
          id: 54,
          url: 'https://www.yjbys.com/edu/guoxuezhihui/145641.html',
          label: '大学',
          value: '',
        },
      ]
    },
    {
      id: 6,
      label: 'Tools',
      children: [
        {
          id: 61,
          url: 'https://www.jinjing365.com/wap/',
          label: '北京进京摄像头分布',
          value: '',
        },
      ]
    },
  ]
  const ListView = ({ data }) => {
    return (
      <View>
        {
          data.map(item => (
            <View key={item.id}>
              <Text style={styles.title}>{item.label}</Text>
              {
                item.children.map((li) => (
                  <TouchableOpacity key={li.id} style={styles.item} onPress={() => handleItem(li)}>
                    <View style={styles.itemTitle}>
                      <Text style={styles.itemText}>{li.label}</Text>
                    </View>
                    <AntDesign size={16} style={{ marginBottom: -3 }} name="right" color="#323233" />
                  </TouchableOpacity>
                ))
              }
            </View>
          ))
        }
      </View>
    )
  }

  const handleItem = (item) => {
    router.push({ pathname: `/webViewer?uri=${item.url}` })
  }
  return (
    <ScrollView style={styles.container}>
      <ListView data={list} />
    </ScrollView>
  )
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#f7f8fa'
  },
  list: {
    
  },
  item: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 16,
    paddingVertical: 10,
    fontSize: 14,
    color: '#323233',
    borderBottomWidth: 1,
    borderColor: '#ebedf0'
  },
  title: {
    paddingHorizontal: 16,
    paddingTop: 20,
    paddingBottom: 16,
    color: '#969799'
  },
  itemTitle: {
    flex: 1
  },
  itemText: {
    lineHeight: 24
  },
  value: {
    flex: 1
  },
  
})